<template>
  <div>
    <!--  main-->
    <el-main>
      <div class="main_container">
        <el-row class="flex-height">
          <el-col :span="6">
            <div class="flex flex-column">
              <div class="flex-1 flex-column  width-100 content-box height-3">
                <div class="flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">实时重点指标</div>
                  <div class="flex-row align-center flex-wrap justify-around flex-height" style="height: 220px;">
                    <div class="text-center" v-for="(item,index) in data01" :key="index">
                      <div class="top-bg px-6 py-2 font-36 bold text-white">{{item.value}}</div>
                      <div class="font-18 bold text-white">{{item.name}}</div>
                    </div>
                    <!-- <div class="text-center">
                      <div class="top-bg px-6 py-2 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">专家资源</div>
                    </div>
                    <div class="text-center">
                      <div class="top-bg px-6 py-3 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">健康知识</div>
                    </div>
                    <div class="text-center">
                      <div class="top-bg px-6 py-3 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">科普资料</div>
                    </div>
                    <div class="text-center">
                      <div class="top-bg px-6 py-3 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">宣传活动</div>
                    </div>
                    <div class="text-center">
                      <div class="top-bg px-6 py-3 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">百姓健康系列</div>
                    </div>
                    <div class="text-center">
                      <div class="top-bg px-6 py-3 font-36 bold text-white">87</div>
                      <div class="font-18 bold text-white">健康陕西</div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">实时重点指标</div>
                  <div ref="chartColumn" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">各地区发布量</div>
                  <div ref="chartColumn2" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex flex-column width-100 center-box" style="height: 67%">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item relative">
                  <img src="../../../assets/img/bigData/earth.png" alt="" style="width: 40%;height: 70%">
                  <img src="../../../assets/img/bigData/center-center.png" class="" alt="" style="width: 200px;margin-bottom: -40px">
                  <img src="../../../assets/img/bigData/center-bottom.png" alt="" style="width: 320px">
                  <div class="center-box-position flex-row align-center justify-center">
                    <div class="absolute" style="top: 40px;left: 80px">
                      <img src="" alt="">1234
                    </div>
                    <div class="center-box-center p-5 flex-row align-center justify-center">
                      <div class="">
                        <div class="font-18 text-white px-5 bold">累计机构数（个）</div>
                        <div class="flex-row mt-2">
                          <div class="font-32 text-white bold py-1 px-2 num-box">3</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">5</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">2</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">8</div>
                        </div>
                      </div>
                      <div class="ml-5">
                        <div class="font-18 text-white px-5 bold">累计专家数（个）</div>
                        <div class="flex-row mt-2">
                          <div class="font-32 text-white bold py-1 px-2 num-box">2</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">4</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">7</div>
                          <div class="font-32 text-white bold py-1 px-2 num-box ml-1">2</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1 center-box">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">本年新增资源数</div>
                  <div class=" flex-1" style="width:100%;height: 100%;overflow-y: auto">
                    <el-table
                        :data="tableData" header-align="center"
                        style="width: 100%">
                      <el-table-column
                          prop="date" align="center"
                          label="排名"
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="name" align="center"
                          label="所属区域"
                          width="180">
                      </el-table-column>
                      <el-table-column align="center"
                                       prop="address"
                                       label="发行量">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex flex-column width-100 content-box height-3">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">浏览渠道</div>
                  <div ref="chartColumn3" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">浏览渠道</div>
                  <div ref="chartColumn4" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">近5年健康队伍建设</div>
                  <div ref="chartColumn5" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'BigDatapage1',
  data () {
    return {
      data01:[],
      tabIndex: 0,
      currentDate: '',
      currentTime: '',
      tableData: [{
        date: '第一名',
        name: '西安市',
        address: '10000'
      }, {
        date: '第二名',
        name: '铜川市',
        address: '10000'
      }, {
        date: '第三名',
        name: '商洛市',
        address: '1000'
      }, {
        date: '第四名',
        name: '榆阳',
        address: '99'
      }]
    }
  },
  created() {
    this.getStatis01();
  },
  mounted () {
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
  },
  methods: {
    getStatis01(){
      this.$http.get('/bigScreen/getStatis01').then(res=>{
        if(res.data.code==200){
          this.data01=res.data.data;
        }
      })
    },
    initChart1 () {
      this.chartColumn = this.$echarts.init(this.$refs.chartColumn)
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '',
          left: '12%',
          top: '13%',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        legend: {
          show: true,
          icon: 'circle',
          top: '13%',
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 25,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: ['西安市', '咸阳市', '渭南市', '安康市', '铜川市', '延安市', '商洛市'],
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            margin: 15
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#587396'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '浏览量',
          type: 'line',
          data: [5, 12, 11, 4, 25, 16, 1],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#9E87FF'
          },
          itemStyle: {
            normal: {
              color: '#9E87FF',
              borderColor: '#9E87FF'
            }
          },
          areaStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#9E87FFb3'
            },
              {
                offset: 1,
                color: '#9E87FF03'
              }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: '#9E87FF'
                },
                  {
                    offset: 0.4,
                    color: '#9E87FF'
                  },
                  {
                    offset: 0.5,
                    color: '#fff'
                  }, {
                    offset: 0.7,
                    color: '#fff'
                  }, {
                    offset: 0.8,
                    color: '#fff'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              },
              borderColor: '#9E87FF',
              borderWidth: 2
            }
          }
        }
        ]
      }
      this.chartColumn.setOption(option)
    },
    initChart2 () {
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2)
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        legend: {
          data: ['昨日总人数', '今日实时人数'],
          top: '4%',
          textStyle: {
            color: '#1FC3CE',
            fontSize: 14
          }
        },
        xAxis: {
          data: [
            '商洛市',
            '渭南市',
            '咸阳市',
            '榆林市',
            '商洛市',
            '铜川市',
            '宝鸡市',
            '延安市',
            '汉中市',
            '安康市'
          ],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#3d5269',
              width: 1
            }
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 30
          }
        },
        yAxis: [{
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3d5269'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 30
          }
        },
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#396A87',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              formatter: '{value} %', // 右侧Y轴文字显示
              textStyle: {
                color: '#396A87',
                fontSize: 14
              }
            }
          }
        ],
        series: [{
          name: '昨日总人数',
          type: 'bar',
          barWidth: 14,
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#0A89FF'
              },
                {
                  offset: 1,
                  color: '#14FAF6'
                }
              ])
            }
          },
          data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97]
        },
          {
            name: '今日实时人数',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#6F48F0'
                },
                  {
                    offset: 1,
                    color: '#BC6FD6'
                  }
                ])
              }
            },
            data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46]
          }
        ]
      }
      this.chartColumn2.setOption(option)
    },
    initChart3 () {
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3)
      var img = ''

      var trafficWay = [{
        name: '小程序',
        value: 20
      }, {
        name: '电脑端',
        value: 10
      }, {
        name: '其他',
        value: 30
      }]

      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [85, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                // var percent = 0
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '：' + params.value
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 30,
              length2: 60,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 108,
              height: 108
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.chartColumn3.setOption(option)
    },
    initChart4 () {
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4)
      const option = {
        backgroundColor: 'transparent',
        grid: [
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          },
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          }
        ],
        xAxis: [
          {
            max: 500,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            },
            axisTick: {
              show: false,
              inside: true,
              lineStyle: {
                color: '#10899A',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: (params) => {
                return '{marginTop|' + params + '}'
              },
              rich: {
                marginTop: {
                  padding: [0, 0, 0, 0],
                  color: '#fff',
                  fontSize: 14,
                  fontFamily: 'PingFangSC',
                  fontWeight: 300

                }
              }
            }
          },
          {
            gridIndex: 1,
            show: true,
            offset: 13,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            }
          }
        ],
        yAxis: [{
          name: '',
          data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
          axisLabel: {
            show: false
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300,
            padding: [0, 0, 8, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#10899A'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#10899A',
              fontSize: 14,
              fontFamily: 'PingFangSC',
              fontWeight: 300
            }
          }

        }, {
          gridIndex: 1,
          data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
          position: 'left',
          nameTextStyle: {
            color: '#06D3CD',
            padding: [0, 0, 0, 8],
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300
          },
          axisLabel: {
            formatter: (params) => {
              return '{marginTop|' + params + '}'
            },
            rich: {
              marginTop: {
                padding: [0, 0, 0, 0],
                color: '#fff',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300

              }
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#10899A'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '订单数量',
          type: 'bar',
          itemStyle: {
            barBorderRadius: 8,
            color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(0,216,255,.3)'
            },
              {
                offset: 1,
                color: '#00D8FF'
              }
            ])
          },
          barWidth: 20,
          data: [482, 378, 446, 518, 238, 358, 312, 378, 220, 452, 302, 372]
        }]
      }
      this.chartColumn4.setOption(option)
    },
    initChart5 () {
      this.chartColumn5 = this.$echarts.init(this.$refs.chartColumn5)
      const dedicatedData = [45, 106, 126, 52, 74, 50, 56, 88, 125]
      const generalData = [42, 126, 146, 22, 54, 80, 96, 78, 115]
      const labelData = ['商洛市',
        '渭南市',
        '咸阳市',
        '榆林市',
        '商洛市',
        '铜川市',
        '宝鸡市',
        '延安市',
        '汉中市']
      // 对话框图片
      const titleArray = ['机构', '专家']
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '18%',
          right: '5%',
          left: '5%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 16
          },
          // 自定义 tooltip
          formatter: function (params) {
            let dom = `${params[0].name}
              <br/>`
            for (const i of params) {
              dom += `${i.marker}
              ${i.seriesName}
                :
              ${i.value}
              <br/>`
            }
            return dom
          }
        },
        legend: {
          show: true,
          itemWidth: 16,
          top: '5%',
          left: 'center',
          data: titleArray,
          textStyle: {
            color: 'RGB(193,223,255)'
          }
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          data: labelData,
          axisLabel: {
            margin: 20,
            color: '#fff',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#08175b'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          }
        }],
        yAxis: [{
          min: 0,
          axisLabel: {
            color: '#fff',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#283352',
              type: 'dashed'
            }
          }
        }],
        series: [{
          name: titleArray[0],
          type: 'bar',
          data: dedicatedData,
          barWidth: '14px',
          itemStyle: {
            barBorderRadius: 10,
            normal: {
              color: '#19ECFF',
              barBorderRadius: [0, 0, 0, 0]
            }
          }
        },
          {
            name: titleArray[1],
            type: 'bar',
            data: generalData,
            barWidth: '14px',
            itemStyle: {
              barBorderRadius: 10,
              normal: {
                color: '#BC6FD6',
                barBorderRadius: [0, 0, 0, 0]
              }
            }
          }
        ]
      }
      this.chartColumn5.setOption(option)
    }
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.height-3{
  height: 32.6%;
}
.main_container {
  height: calc(100vh - 167px);
}
.el-col{
  height: 100%;
}
.center-box{
  margin-left:10px;
  margin-right:10px;
  width: calc(100% - 20px);
}
.bigData_bg{
  height: 100vh;
  background: url("../../../assets/img/bigData/bg.png");
  background-size: 100% 100%;
}
.head{
  background: url("../../../assets/img/bigData/head.png");
  background-size: 100% 100%;
}
.top-bg{
  background: url("../../../assets/img/bigData/top1.png");
  background-size: 100% 100%;
}
.tab-box{
  margin: 50px 0 0 158px
}
.head-tab{
  background: url("../../../assets/img/bigData/btn.png");
  background-size: 100% 100%;
}
.head-tab-select{
  background: url("../../../assets/img/bigData/btnselect.png");
  background-size: 100% 100%;
}
.content-box{
  background: url("../../../assets/img/bigData/left-bg.png");
  background-size: 100% 100%;
}
/deep/.el-table, /deep/.el-table th, /deep/.el-table tr, /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
  background: transparent !important;
}
/deep/.el-table th.is-leaf, /deep/.el-table td{
  border: none !important;
}
/deep/.el-table{
  color: #fff !important;
}
/deep/.el-table thead{
  color: #00FFF0 !important;
}
.center-box-position{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.center-box-center{
  background: url("../../../assets/img/bigData/center.png");
  background-size: 100% 100%;
}
.num-box{
  background: url("../../../assets/img/bigData/number.png");
  background-size: 100% 100%;
}
</style>
